<template>
  <div class="hunheBox">
    <div></div>
  </div>
</template>

<style lang="scss" scoped>
@mixin flex($layout) {
  display: flex;
  justify-content: $layout;
  align-items: $layout;
}

// 断点列表
$breakpoints: (
  "phone": (
    320px,
    480px,
  ),
  "pad": (
    481px,
    768px,
  ),
  "notebook": (
    769px,
    1024px,
  ),
  "desktop": (
    1025px,
    1200px,
  ),
  "tv": (
    1201px,
  ),
);

@mixin respond_to($breakname) {
  $bp: map-get($breakpoints, $breakname);

  @if type-of($bp) == "list" {
    $min: nth($bp, 1);
    $max: nth($bp, 2);

    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}

.hunheBox {
  width: 200px;
  height: 500px;
  background-color: #333;
  @include flex(center);

  @include respond_to("phone") {
    height: 320px;
    background-color: #999;
  }

  @include respond_to("pad") {
    height: 400px;
    background-color: #ccc;
  }

  div {
    width: 100px;
    height: 200px;
    background-color: #fff;
  }
}
</style>
